import React from 'react'
import {
  autorun,
  observable,
  getObservableMaker,
  observe,
  define,
  reaction,
} from '@formily/reactive'

// const obs = observable({a: 1})
//
// const ref = observable.ref(obs)
//
// reaction(() => {
//   console.log('ref.value: ', ref.value.a)
// })
//
// observe(ref, (value) => {
//   console.log('set', value)
// })
//
// setTimeout(() => {
//   ref.value = {a: 2}
// }, 1000)

const target = {
  o1: 1,
}

const refObserver = getObservableMaker(observable.ref)({ target, key: 'o1' })

reaction(() => {
  console.log('refObserver.value: ', refObserver.o1)
})

setTimeout(() => {
  refObserver.o1 = 2
}, 1000)

export default () => <div>ref-test</div>
